import React, { useState, useRef } from "react";
import Cascader from "./components/Cascader/Cascader";
import { optionsClass, optionsAlways } from "./config/option";
import "./test.css";

interface PropsType {}
export const CascadeRreact: React.FC<PropsType> = (props) => {
  const [textAlways, settextAlways] = useState<string>("按常用件选择"); // 保存图片上传ID

  // 选择常用件后的回调
  const onChangealways = (value: any[]) => {
    console.log(value);
    if (value.length > 0) {
      settextAlways(value.map((el) => el.title).join(","));
    }
  };

  // 选择品类后的回调
  const onChangeclass = (value: any[]) => {
    console.log(value);
  };

  return (
    <div>
      <div className="Cascadera">
        <Cascader
          data={optionsAlways}
          placeholder={textAlways}
          onChange={(res) => onChangealways(res)}
        ></Cascader>
      </div>

      <div className="Cascadera">
        <Cascader
          data={optionsClass}
          placeholder="按品类选择"
          onChange={(res) => onChangeclass(res)}
        ></Cascader>
      </div>
    </div>
  );
};
